<template>
	<div class="home wrapper">
		<h1>欢迎来到德莱联盟！</h1>
		<h2>吾之荣耀，离别已久</h2>
		<h3>断剑重铸之日 其势归来之时</h3>
		<h4>死后能做的最棒的事情是什么？就是碾碎你的敌人，看着他们先你一步而去，并聆听他们怯懦的哭喊。</h4>
		<h2 class="from">——英雄联盟</h2>

		<div class="search">
			<input
				class="music-input"
				type="text"
				:placeholder="placeholder"
				autocomplete="off"
				@keyup.13="search"
				@blur="reset"
				v-model="searchMusic.musicName"
				title="点我一下"
			/>
		</div>
		<g-dialog v-bind="searchMusic" @close-dialog="closeDialog" @show-huogai="showHuoGai" />
	</div>
</template>

<script>
	import Dialog from "../components/Dialog";

	export default {
		name: "home",
		data() {
			return {
				placeholder: "如果你想听音乐的话...",
				searchMusic: {
					title: "王草莓提示",
					musicName: "",
					msg: "对不起，听不了",
					dialogShow: false
				}
			};
		},
		components: {
			"g-dialog": Dialog
		},
		methods: {
			// 搜索
			search() {
				if (this.searchMusic.musicName) this.searchMusic.dialogShow = true;
				else this.placeholder = "你咋不打字...";
			},
			// 关闭模态框
			closeDialog() {
				this.searchMusic.dialogShow = false;
				this.searchMusic.musicName = "";
			},
			// 重置placeholder
			reset() {
				this.placeholder = "如果你想听音乐的话...";
			},
			// 活该
			showHuoGai() {
				this.searchMusic.msg = "活该！";
			}
		}
	};
</script>

<style scoped>
	.home {
		color: #999;
		padding: 100px 0;
	}

	.from {
		text-align: right;
		color: pink;
		margin-top: 50px;
	}

	.search {
		margin-top: 150px;
		text-align: center;
	}

	.music-input {
		width: 30%;
		height: 40px;
		border: 0;
		font-size: 28px;
		padding: 5px 20px;
		background-color: transparent;
		color: #fff;
	}

	.music-input:focus {
		outline: none;
		border-bottom: 2px solid pink;
	}
</style>
